<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-23 10:37:25
 * @LastEditTime: 2019-08-27 10:02:18
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container" style="width:99%;margin-top:-1px;">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-form-item>
          <el-input v-model="filters.label" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button
            :label="$t('action.search')"
            perms="sys:cmsContent:view"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button
            :label="$t('action.add')"
            perms="sys:cmsContent:add"
            type="primary"
            @click="handleAdd"
          />
        </el-form-item>

      </el-form>
    </div>
    <!--表格内容栏-->
    <kt-table
      :height="500"
      permsEdit="sys:cmsContent:edit"
      permsDelete="sys:cmsContent:delete"
      :data="pageResult"
      :columns="columns"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
    ></kt-table>
    <!--新增编辑界面-->
    <el-dialog
      :modal="true"
      :fullscreen="false"
      :title="operation?'新增':'编辑'"
      width="60%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        class="align"
      >
        <el-form-item label prop="id" v-if="dataForm.isPrimaryKey">
          <el-input v-model="dataForm.id" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="dataForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <el-input v-model="dataForm.content" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建的时间" prop="content">
          <el-date-picker v-model="dataForm.createTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>

        <el-form-item label="更新的时间" prop="content">
          <el-date-picker v-model="dataForm.updateTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>

        <el-form-item label="文章类型" prop="content">
          <select name="public-choice" v-model="dataForm.type" @change="getCouponSelected">
            <option
              :value="coupon.id"
              v-for="(coupon,index) in couponList"
              :key="index"
            >{{coupon.name}}</option>
          </select>

          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="dataForm.type" placeholder="请选择">
            <el-option
              v-for="item in couponList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>

          <el-radio-group v-model="dataForm.type">
            <el-radio :label="2">备选项2</el-radio>
            <el-radio :label="10">备选项10</el-radio>
            <el-radio :label="3">备选项3</el-radio>
          </el-radio-group>
          <br />

          <el-checkbox-group v-model="checkList">
            <el-checkbox label="100">复选框 A</el-checkbox>
            <el-checkbox label="复选框 B"></el-checkbox>
            <el-checkbox label="复选框 C"></el-checkbox>
            <el-checkbox label="复选框 DD" value='11'></el-checkbox>
            <el-checkbox label="禁用" disabled></el-checkbox>
            <el-checkbox label="选中且禁用" disabled></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <Editor @input="handelIncrease" v-model="dataForm.content" type="text"></Editor>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtTable from "@/views/Core/KtTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import Editor from "@/components/Editor";

export default {
  components: {
    KtTable,
    KtButton,
    Editor
  },
  created() {
    //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
    //this.couponSelected = this.couponList[0].id;
  },
  data() {
    return {
      checkList: ['选中且禁用','100','11'],
      couponList: [
        {
          id: 1,
          name: "优惠券1"
        },
        {
          id: 2,
          name: "优惠券2"
        },
        {
          id: 3,
          name: "优惠券3"
        },
        {
          id: 7,
          name: "优惠券7"
        },
        {
          id: 10,
          name: "优惠券10"
        }
      ],
      couponSelected: 1,
      options: [
        {
          value: 1,
          label: "黄金糕"
        },
        {
          value: 2,
          label: "双皮奶"
        },
        {
          value: 3,
          label: "蚵仔煎"
        },
        {
          value: 4,
          label: "龙须面"
        },
        {
          value: 5,
          label: "北京烤鸭"
        }
      ],
      value: 3,

      size: "small",
      filters: {
        label: ""
      },
      columns: [
        { prop: "id", label: "ID", minWidth: 50 },
        { prop: "type", label: "类型", minWidth: 60 },
        { prop: "title", label: "文章标题", minWidth: 200 },
        { prop: "content", label: "文章内容", minWidth: 200 },
        { prop: "createTime", label: "创建的时间", minWidth: 200 },
        { prop: "updateTime", label: "更新的时间", minWidth: 200 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},

      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      dataFormRules: {
        label: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      // 新增编辑界面数据
      dataForm: {
        id: null,
        type: null,
        title: null,
        content: null,
        createTime: null,
        updateTime: null
      }
    };
  },
  methods: {
    getCouponSelected() {
      //获取选中的优惠券
      console.log(this.couponSelected);
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.pageRequest = data.pageRequest;
      }
      this.pageRequest.columnFilters = {
        label: { name: "label", value: this.filters.label }
      };
      this.$api.cmsContent
        .findPage(this.pageRequest)
        .then(res => {
          this.pageResult = res.data;
        })
        .then(data != null ? data.callback : "");
    },
    // 批量删除
    handleDelete: function(data) {
      this.$api.cmsContent
        .batchDelete(data.params)
        .then(data != null ? data.callback : "");
    },
    // 显示新增界面
    handleAdd: function() {
      this.editDialogVisible = true;
      this.operation = true;
      this.dataForm = {
        id: null,
        type: null,
        title: null,
        content: null,
        createTime: null,
        updateTime: null
      };
    },
    // 显示编辑界面
    handleEdit: function(params) {
      this.editDialogVisible = true;
      this.operation = false;
      this.dataForm = Object.assign({}, params.row);
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.$api.cmsContent.save(params).then(res => {
              if (res.code == 200) {
                this.$message({ message: "操作成功", type: "success" });
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
              this.editLoading = false;
              this.$refs["dataForm"].resetFields();
              this.editDialogVisible = false;
              this.findPage(null);
            });
          });
        }
      });
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    }
  },
  mounted() {}
};
</script>

<style scoped>
.align {
  text-align: left;
}
</style>
